<template>
  <div class="app">
    <div class="nav">
      <router-link to="/" class="nav-item">简介</router-link>
      <router-link to="/button" class="nav-item">Button</router-link>
      <router-link to="/icon" class="nav-item">Icon</router-link>
      <router-link to="/link" class="nav-item">Link</router-link>
      <router-link to="/container" class="nav-item">Container</router-link>
      <router-link to="/collapse" class="nav-item">Collapse</router-link>
      <router-link to="/message" class="nav-item">Message</router-link>
      <router-link to="/messagebox" class="nav-item">MessageBox</router-link>
      <router-link to="/tooltip" class="nav-item">Tooltip</router-link>
      <router-link to="/input" class="nav-item">Input</router-link>
      <router-link to="/select" class="nav-item">Select</router-link>
      <router-link to="/switch" class="nav-item">Switch</router-link>
      <router-link to="/rate" class="nav-item">Rate</router-link>
      <router-link to="/form" class="nav-item">Form</router-link>
    </div>
    <router-view class="nav-view"></router-view>
  </div>

</template>

<script setup lang="ts">
  
</script>

<style>
.app{
  margin: 20px;
}
.nav{
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
  font-family: "Helvetica Neue", sans-serif;
}
.nav-item{
  position: relative;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  padding: 4px 2px;
  transition: color 0.3s ease;
}
/* 鼠标悬停时下划线 */
.nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #42b983;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
}

.router-link-active {
  font-weight: 600;
  color: #000;
}

.router-link-active::after {
  transform: scaleX(1);
}
</style>
